<template>
    <div class="recommend">
        <div class="recommend-title">
            <span class="recommend-title-left">
                <img class="recommend-title-left-img" src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
                本周热门榜单
            </span>
            <span class="recommend-title-right">全部榜单 ></span>
        </div>
        <ul class="recommend-list">
            <router-link tag="li" :to="'/detail/' + item.id" class="recommend-list-item" v-for="item in list" :key="item.id">
                <img class="recommend-list-img" :src="item.imgUrl" :alt="item.title">
                <p class="recommend-list-title">{{ item.title }}</p>
                <p class="recommend-list-price"><span class="price">￥{{ item.price }}</span>起</p>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
    .recommend
        padding-top .2rem
        border-top .2rem solid #eee
        .recommend-title
            line-height .4rem
            margin-bottom .2rem
            .recommend-title-left
                display inline-block
                margin-left .2rem
                font-size .32rem
                .recommend-title-left-img
                    width .3rem
            .recommend-title-right
                float right
                margin-right .4rem
                font-size .24rem
        .recommend-list
            overflow-x scroll
            overflow-y hidden
            height 0
            padding 0 .24rem 3rem .14rem
            text-align center
            white-space nowrap
            .recommend-list-item
                display inline-block
                width 2rem
                margin-left .1rem
                font-size .24rem
                .recommend-list-img
                    width 2rem
                .recommend-list-title
                    line-height .4rem
                    ellipsis()
                .recommend-list-price
                    line-height .4rem
                    .price
                        color orange
</style>
